import Icon from '@/components/Icon'
import { useStore } from '@/store'
import styles from './index.module.scss'
import { observer } from 'mobx-react-lite'

type Props = {
  showPopup?: () => void
  scrollToComment?: () => void
}

const CommentFooter = ({ showPopup, scrollToComment }: Props) => {
  const { articleDetailStore, commentStore } = useStore()
  return (
    <div className={styles.root}>
      <div className="input-btn" onClick={showPopup}>
        <Icon type="iconbianji" />
        <span>抢沙发</span>
      </div>

      <div className="action-item" onClick={scrollToComment}>
        <Icon type="iconbtn_comment" />
        <p>评论</p>
        {!!1 && (
          <span className="bage">
            {commentStore.commentData.results.length}
          </span>
        )}
      </div>
      <div className="action-item">
        <Icon type={true ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
        <p>点赞</p>
      </div>
      <div
        className="action-item"
        onClick={() => articleDetailStore.collectArticle()}>
        <Icon
          type={
            articleDetailStore.articleData.is_collected
              ? 'iconbtn_collect_sel'
              : 'iconbtn_collect'
          }
        />
        <p>收藏</p>
      </div>

      <div className="action-item">
        <Icon type="iconbtn_share" />
        <p>分享</p>
      </div>
    </div>
  )
}

export default observer(CommentFooter)
